Fancybox

Fancybox is the ultimate JavaScript lightbox alternative that sets the standard for premium user experience in multimedia display. It is built using TypeScript for use with various modern application frameworks (React, Vue, etc) or simply with pure Javascript.

It uses the Carousel component under the hood, and the Panzoom component is used to make the images interactive.

Key Features

• Support for images, iframes, Ajax, videos and any other HTML content
• Automatic detection and display of YouTube, Vimeo videos and Google Maps
• Swipe, drag and pinch-to-zoom gestures
• Fully customizable toolbar with optional transformation controls
• Three types of thumbnails
• Mouse panning
• Multiple active instances at the same time
• Many configuration options including CSS transitions, RTL, etc.
• Hash navigation
• Compact mode plugin to mimic the mobile Photos app experience
• Sidebar plugin to easily create a two-column layout New

Examples

Modern thumbnailsClassic thumbnailsScrollable thumbnailsNo thumbnailsFade transitionCrossfade transitionSliding animationNo animationDark themeLight themeAuto

Transformation controls

Mouse panning

Videos

Various

Hello, world!

Try pressing the Tab key and notice that the user is blocked from navigating the rest of the page.

To close dialog hit the Esc button, click on the overlay or just click the close button.

Element used to launch the modal would receive focus back after closing.

Hey there!

Content of the nested modal.

RTL

Compact Mode

The Compact Mode plugin mimics the experience of the Photos mobile app. Resize the window to see the effect - by default, it's enabled when any of the window dimensions are smaller than 578 pixels.

Sidebar

The Sidebar plugin creates a two-column layout with a sidebar that displays each slide's caption or custom HTML content.

Combined with Carousel

There is no need to take any additional steps to combine Carousel with Fancybox. They will sync automatically, no additional code is required.

JS Bin Example